<template>
	<view class="search-page">
		<view class="search-header">
			<uv-search
				v-model="keyword"
				height="36"
				shape="square"
				color="#2B2D2E"
				bgColor="#F5F8FA"
				:showAction="false"
				:clearabled="true"
				class="search-page-search"
				placeholder="输入您要回收的机型"
			>
				<template #prefix>
					<view class="search-image">
						<image mode="widthFix" class="icon-search" src="@/static/images/icon_search.png"></image>
					</view>
				</template>
			</uv-search>
			<view class="cancel-btn" @click="cancelSearch">取消</view>
		</view>
		<view class="search-body">
			<scroll-view
				scroll-y="true"
				class="search-scroll-view"
			>
				<view class="search-scroll-body">
					<view
						v-show="!keyword && searchList.length === 0"
						class="search-history-hot"
					>
						<view
							v-if="historyList.length"
							class="search-history"
						>
							<view class="search-base-title">
								<text>最近搜索</text>
								<image
									class="icon-delete"
									src="@/static/images/icon_search_delete.png"
									@click="removeHistory"
								></image>
							</view>
							<hsb-business-search-product-list
								:list="historyList"
								@product="toEvaluate"
							/>
						</view>
						<view class="search-hot">
							<view class="search-base-title">
								<text>热门搜索</text>
							</view>
							<hsb-business-search-product-list
								:list="hotList"
								@product="toEvaluate"
							/>
						</view>
					</view>
					<hsb-business-search-product-list
						v-if="searchList.length"
						:list="searchList"
						@product="toEvaluate"
					/>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import debounce from '@climblee/uv-ui/libs/function/debounce.js'

export default {
	data () {
		return {
			keyword: '',
			historyList: [],
			hotList: [],
			searchList: []
		}
	},
	watch: {
		keyword (value) {
			if (!value) {
				this.searchList = []
			} else {
				debounce(() => {
					this.getSearchProductList(value)
				})
			}
		}
	},
	methods: {
		async getHotProductList () {
			const [res] = await this.$apis.getProductList({
				pageIndex: 1,
				pageSize: 8
			})
			if (res._errCode === '0') {
				this.hotList = res._data.productList || []
			}
		},
		async getSearchProductList (keyword) {
			const [res] = await this.$apis.getProductList({
				keyword,
				pageIndex: 1,
				pageSize: 50
			})
			if (res._errCode === '0') {
				const productList = res._data.productList || []
				this.searchList = !keyword ? [] : productList
			}
		},
		initHistory () {
			this.historyList = uni.getStorageSync('hsb_user_search') || []
		},
		cancelSearch () {
			if (this.keyword) {
				this.keyword = ''
			} else if (this.searchList.length) {
				this.searchList = []
			}
		},
		updateHistory (productInfo) {
			const hasExistIdx = this.historyList.findIndex(e => e.productId === productInfo.productId)
			if (hasExistIdx !== -1) {
				this.historyList.splice(hasExistIdx, 1)
			}
			this.historyList.unshift(productInfo)
			if (this.historyList.length > 4) {
				this.historyList.pop()
			}
			uni.setStorageSync('hsb_user_search', this.historyList)
		},
		removeHistory () {
			this.historyList = []
			uni.removeStorageSync('hsb_user_search')
		},
		toEvaluate (productInfo) {
			if (!productInfo.productId) return
			this.updateHistory(productInfo)
			uni.navigateTo({
				url: `/pages/evaluate/index?productId=${productInfo.productId}`
			})
		}
	},
	onLoad () {
		this.initHistory()
		this.getHotProductList()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
